<template>
  <div class="neighbourhoodMain">
    <van-nav-bar
      title="邻里互助"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <SearchInput :placeText="placeText" class="inputBox"></SearchInput>
    <div class="discuss">
      <van-tabs class="discuss-tabs" v-model="active" :color="color" swipeable>
        <van-tab :title="tab1">
          <div class="item" v-for="(i, index) in discussList" :key="index">
            <div class="top">
              <div class="left">
                <img v-bind:src="i.avatar" class="image" />
              </div>
              <div class="right">
                <div class="right-title">{{ i.title }}</div>
                <div class="right-desc">{{ i.desc }}</div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="bottom">
              <div class="bottom-good" @click="addGoods">
                <van-icon name="good-job-o" />
                <span>
                  {{ i.goods.length }}
                </span>
              </div>
              <div class="bottom-discuss" @click="gotoDeatils()">
                <van-icon name="chat-o" />
                <span>
                  {{ i.discusses.length }}
                </span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="tab2">
          <div class="item" v-for="(i, index) in mydiscussList" :key="index">
            <div class="top">
              <div class="left">
                <img v-bind:src="i.avatar" class="image" />
              </div>
              <div class="right">
                <div class="right-title">{{ i.title }}</div>
                <div class="right-desc">{{ i.desc }}</div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="bottom">
              <div class="bottom-good" @click="addGoods">
                <van-icon name="good-job-o" />
                <span>
                  {{ i.goods.length }}
                </span>
              </div>
              <div class="bottom-discuss" @click="gotoDeatils()">
                <van-icon name="chat-o" />
                <span>
                  {{ i.discusses.length }}
                </span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import SearchInput from "../components/SearchInput.vue";

export default {
  name: "NeighbourhoodHelp",
  components: {
    SearchInput,
  },
  data() {
    return {
      backAddr: "/community",
      detailAddr: "/community/neighbourhoodhelp/helpdetails",
      title: "邻里互助",
      placeText: "失物丢失",
      tab1: "全部帖子",
      tab2: "我的求助",
      color: "#64b587",
      discussList: [
        {
          title: "交通卡丢失",
          desc: "今天下午，在小区...",
          avatar: require("../assets/avatar/Charactor01.png"),
          author: "李浩",
          time:'2021-6-3',
          goods: [
            {
              avator: require("../assets/avatar/Charactor04.png"),
              name: "张三",
              time:'2021-6-3',
            },
            {
              avator: require("../assets/avatar/Charactor05.png"),
              name: "李四",
              time:'2021-6-4',
            },
          ],
          discusses: [
            {
              avator: "",
              name: "李四",
              time: "2021-6-4",
              comment: "hhhhhh",
            },
          ],
        },
        {
          title: "有人一起组队吗",
          desc: "周六的足球比赛...",
          avatar: require("../assets/avatar/Charactor02.png"),
          author: "三三",
          time:'',
          goods: [
            {
              avator: "",
              name: "张三",
              time:'',
            },
          ],
          discusses: [
            {
              avator: "",
              name: "李四",
              time: "2021-6-4",
              comment: "hhhhhh",
            },
          ],
        },
        {
          title: "我的猫不见了",
          desc: "今天下午，在小区...",
          avatar: require("../assets/avatar/Charactor03.png"),
          author: "猫猫",
          time:'',
          goods: [],
          discusses: [
            {
              avator: "",
              name: "李四",
              time: "2021-6-4",
              comment: "hhhhhh",
            },
          ],
        },
      ],
      mydiscussList: [
        {
          title: "我的猫不见了",
          desc: "今天下午，在小区...",
          avatar: require("../assets/avatar/Charactor03.png"),
          author: "猫猫",
          time:'',
          goods: [],
          discusses: [
            {
              avator: "",
              name: "李四",
              time: "2021-6-4",
              comment: "hhhhhh",
            },
          ],
        },
      ],
    };
  },
  methods: {
    gotoDeatils() {
      this.$router.push({ path: this.detailAddr });
    },
    onClickLeft() {
      this.$router.push({ path: this.backAddr });
    },
  },
};
</script>

<style lang="scss" >
body {
  background-color: #f6f7f7;
}
.neighbourhoodMain {
  width: 375px;
  margin: 0;
}
.inputBox {
  margin: 10px 10px 10px 10px;
}
.discuss {
  border-radius: 5px;
  margin: 10px 10px 0px 10px;

  .van-tabs__wrap {
    border-radius: 5px;
    height: 50px;
  }
  .van-tabs__content {
    margin: 10px 0px 0px 0px;
  }
}
.item {
  height: 130px;
  border-radius: 10px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0px 0px 10px 0px;
  .top {
    display: flex;
    width: 100%;
    .left {
      .image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin: 5px;
      }
    }
    .right {
      margin: 10px;
      .right-title {
        font-weight: bold;
        font-size: 18px;
      }
      .right-desc {
        font-size: 16px;
        color: #adadad;
      }
    }
  }
  .bottom {
    display: flex;
    width: 100%;
    color: #b9b9b9;
    .bottom-good {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
    }
    .bottom-discuss {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
    }
  }
}
.el-divider--horizontal {
  width: 95%;
  margin: 0px;
}
.van-nav-bar {
  background-color: #64b587;

  .van-nav-bar__title {
    color: white;
    font-weight: bold;
  }
  .van-icon {
    color: white;
  }
}
</style>